<template>
  <div class="products-container">
    <!-- 左侧商品类别列表 -->
    <ul class="category-list-wrap">
      <li
        @click="selectCategory(index)"
        v-for="(category, index) in categoryList"
        :key="category.categoryId"
        :class="currentIndex === index ? 'bg-active' : ''"
      >
        {{ category.categoryName }}
      </li>
    </ul>

    <!-- 右侧商品列表 -->
    <ul class="product-list-wrap" ref="productList">
      <li
        v-for="category in categoryList"
        :key="category.categoryId"
        class="productList-li"
      >
        <ul>
          <!-- 商品信息组件 -->
          <product-info
            v-for="product in category.products"
            :key="product.id"
            :proInfo="product"
          ></product-info>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import ProductInfo from "../common/components/ProductInfo.vue";
export default {
  components: {
    ProductInfo,
  },
  computed: {
    categoryList() {
      const { categoryList } = this.$store.state;
      return categoryList;
    },
    // 获取当前列别索引
    currentIndex () {
      for (let i = 0; i < this.heightList.length; i++) {
        let height1 = this.heightList[i]
        let height2 = this.heightList[i + 1]
        if (!height2 || (this.listScrollTop >= height1 && this.listScrollTop < height2)) {
          return i
        }
      }
      return 0
    },
  },
  data() {
    return {
      heightList: [], // 存放每个类别的高度
      listScrollTop: 0, // 滚动实时高度
    };
  },
  mounted() {
    this.listenScroll();
    setTimeout(() => {
      this.setHeightList();
    }, 0);
  },
  methods: {
    // 监听产品列表滚动事件
    listenScroll() {
      const rightListRef = this.$refs.productList;
      rightListRef.addEventListener("scroll", this.scrollCallBack);
    },
    scrollCallBack(e) {
      this.listScrollTop = e.target.scrollTop;
      if (e.target.scrollTop === 0) {
        this.$emit("cancel-fixed");
      }
    },
    // 选择左侧类别
    selectCategory(index) {
      this.$refs.productList.scrollTop = this.heightList[index];
    },
    // 获取每个类别的高度，存放入数组中，在滚动过程中判断当前高度，选中左侧对应的商品类别
    setHeightList() {
      const itemArray = []; //定义一个伪数组
      let top = 1;
      itemArray.push(top);
      const allList =
        this.$refs.productList.getElementsByClassName("productList-li");
      Array.prototype.slice.call(allList).forEach((li) => {
        top += (li.clientHeight + 12); //获取所有li的每一个高度
        itemArray.push(top);
      });
      this.heightList = itemArray;
      console.log(this.heightList);
    },
  },
  beforeDestroy() {
    // 组件销毁时  移除事件
    const rightListRef = this.$refs.productList;
    rightListRef.removeEventListener("scroll", this.scrollCallBack);
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.products-container {
  display: flex;
  padding: 0.1rem 0;
  background-color: #fff;
}
/* 左侧列表 */
.category-list-wrap {
  width: 0.78rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-list-wrap li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.78rem;
  height: 0.6rem;
  font-size: 0.12rem;
  color: #999999;
  list-style: none;
  background-color: #f5f5f5;
}
.category-list-wrap .bg-active {
  background-color: #fff;
}
/* 右侧列表 */
.product-list-wrap {
  box-sizing: border-box;
  flex: 1;
  /* min-height: 8rem; */
  overflow-y: auto;
}
/* 商品 li */
.product-wrap {
  margin-bottom: 0.15rem;
  box-sizing: border-box;
  padding: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.15rem;
  overflow-y: hidden;
}
.pro-img {
  width: 1.15rem;
  height: 1.15rem;
}
.product-wrap .pro-info-wrap {
  margin-left: 0.1rem;
  height: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-wrap .pro-info-wrap h3 {
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-size: 0.14rem;
}
.price-count-wrap {
  display: flex;
  justify-content: space-between;
}
.red {
  color: #fa5150;
}
.count-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.count-wrap img {
  width: 0.2rem;
  height: 0.2rem;
}
.product-count {
  color: #999999;
  padding: 0 0.04rem;
}
</style>
